﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>微信公众号</title>
    <meta charset="UTF-8" />
    <!--生成设备虚拟窗口便于开发-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no" />
    <!--解决浏览器兼容性-->
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />


    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .con {
            padding: 0 5%;
        }

        h4 {
            padding: 15px 0 10px 0;
            border-bottom: 1px solid #4A4F63;
        }

        .container {
            width: 100%;
            margin: 0 auto;
            padding: 0;
        }

        .tab-content {
            width: 100%;
            margin: 0 auto;
        }

        .tab-pane .title {
            border-bottom: 1px solid #4A4F63;
            font-weight: 700;
        }

        .tab-pane ul li {
            margin-top: 15px;
            display: flex;
            align-items: center;
            /*justify-content: center;*/
        }

            .tab-pane ul li > span:nth-child(1) {
                width: 112px;
                text-align: right;
            }

            .tab-pane ul li > span:nth-child(2) {
                width: 174px;
                word-break: break-all;
            }

            .tab-pane ul li:last-child > button {
                margin-left: 112px;
            }

        .btn-primary {
            padding: 4px 0;
            width: 174px;
            text-align: center;
        }
    </style>

</head>
<body>
    <div class="con">
        <h4>公众号绑定</h4>
        <div id="rootwizard">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <ul>
                            <li><a href="#tab1" data-toggle="tab">公众号信息</a></li>
                            <li><a href="#tab2" data-toggle="tab">AppId和AppSecret信息</a></li>
                            <li><a href="#tab3" data-toggle="tab">开源信息</a></li>
                            <li><a href="#tab4" data-toggle="tab">商户信息</a></li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane" id="tab1">
                    <p class="title">公众号信息</p>
                    <ul class="ul-con">
                        <li>
                            <span style="font-weight: 700">公众微信号：</span>
                            <input type="text">
                            <input type="button" value="绑定" class="btn btn-primary" style="margin-left: 110px">
                        </li>
                        <li style="font-weight: 700">
                            登陆微信公关平台，点击高级功能=>>开发模式=>>成为开发者=>>填写接口配置信息
                        </li>
                        <li>
                            <span style="font-weight: 700">URL：</span>
                            <input type="text" value="http://localhost:27818/Account/Index">
                            <button class="btn btn-primary" style="margin-left: 110px">复制</button>
                        </li>
                        <li>
                            <span style="font-weight: 700">Taken：</span>
                            <input type="text" value="http://localhost:27818/Account/Index">
                            <button class="btn btn-primary">复制</button>
                        </li>

                    </ul>
                </div>
                <div class="tab-pane" id="tab2">
                    <p class="title">AppId和AppSecret信息</p>
                    <ul>
                        <li>
                            已开启自动回复设置
                            通过编辑内容或关键词规则，快速进行自动回复设置。如具备开发能力，可更灵活地使用该功能。查看详情
                            被添加自动回复
                            消息自动回复
                            关键词自动回复
                        </li>
                        <li>
                            <span>AppId：</span>
                            <input type="text">
                        </li>
                        <li>
                            <span>AppSecret：</span>
                            <input type="text">
                        </li>
                        <li>
                            <button class="btn btn-primary">
                                保存AppId和AppSecret
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane" id="tab3">
                    <p class="title">开源信息</p>
                    <ul>
                        <li>
                            已开启自动回复设置
                            通过编辑内容或关键词规则，快速进行自动回复设置。如具备开发能力，可更灵活地使用该功能。查看详情
                            被添加自动回复
                            消息自动回复
                            关键词自动回复
                        </li>
                        <li>
                            <span>是否保存第三方：</span>
                            <input type="radio" name="san" id="shi">
                            <label for="shi">是</label>
                            <input type="radio" name="san" id="fou">
                            <label for="fou">否</label>

                        </li>
                        <li>
                            <span>第三方Url：</span>
                            <input type="text">
                        </li>
                        <li>
                            <span>第三方AppSecret：</span>
                            <input type="text">
                        </li>
                        <li>
                            <button class="btn btn-primary">
                                保存开源信息
                            </button>
                        </li>

                    </ul>
                </div>
                <div class="tab-pane" id="tab4">
                    <p class="title">商户信息</p>
                    <ul>
                        <li>
                            已开启自动回复设置
                            通过编辑内容或关键词规则，快速进行自动回复设置。如具备开发能力，可更灵活地使用该功能。查看详情
                            被添加自动回复
                            消息自动回复
                            关键词自动回复
                        </li>
                        <li>
                            <span>商户名：</span>
                            <input type="text">
                        </li>
                        <li>
                            <span>商户Id：</span>
                            <input type="text">
                        </li>
                        <li>
                            <span>商户key：</span>
                            <input type="text">
                        </li>
                        <li>
                            <span>证书地址：</span>
                            <input type="text">
                        </li>
                        <li>
                            <span>证书密码：</span>
                            <input type="text">
                        </li>
                        <li>
                            <button class="btn btn-primary">
                                保存商户信息
                            </button>
                        </li>
                    </ul>
                </div>

                <ul class="pager wizard">
                    <li class="previous">
                        <a style="margin-left: 130px" href="#">Prev</a>
                    </li>
                    <li class="next" style="float: left">
                        <a style="margin-left: 10px" href="#">Next</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


</body>
</html>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.bootstrap.wizard.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#rootwizard').bootstrapWizard();

        $('#tab1 li > button').click(function () {
            var ele = $(this).prev();
            ele.select(); // 选择对象
            document.execCommand('copy', true);
            $.L.msgSuccess('复制成功！');
        });

    });
</script>
